<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Navigation:  Frames Load Order</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Ronnie T. Moore, Editor">
<META NAME="section" CONTENT="Navigation">
<META NAME="description" CONTENT="Loads a frame only after the other frame has completely finished loading.  With two frames, for example, the top frame is blank until the bottom frame loads.  Then, the top frame loads with the correct page.  Great!">
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /navigation/"><font color="#FF0000"><b>Navigation</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Frames Load Order</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Loads a frame only after the other frame has completely finished loading.  With two frames, for example, the top frame is blank until the bottom frame loads.  Then, the top frame loads with the correct page.  Great!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
<form name="openpage">
<input type=button value="Open Frames Load Order Demo Page" onClick="javascript:alert('We will now open the script demo page in a new window.  To return to this page, simply close the demo window.');window.open('frames-load-order-demo.html');">
</form>
</center>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Navigation:  Frames Load Order</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  1.02 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- FOUR STEPS TO INSTALL FRAMES LOAD ORDER:

  1.  Copy the coding into the HEAD of your frameset document
  2.  Add the onLoad event handler to the frameset tag
  3.  Change the frame you want to load last to blank.html
  4.  Save the last code as your blank.html (the temp. page)  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your frameset document  --&gt;

&lt;HEAD&gt;
&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Ronnie T. Moore, Editor --&gt;
&lt;!-- Web Site:  JavaScript Source Code 3000 --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
function refreshFrame() {
frames['frame1'].window.location.href = "frame1-page.html"; // frame 1's page
}
//  End --&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;!-- STEP TWO: Paste this onLoad event handler into the frameset tag  --&gt;

&lt;frameset rows="50%,*" onLoad="refreshFrame();"&gt;

&lt;!-- STEP THREE: Set up the temporary blank.html page for the frame  --&gt;
&gt;!-- that you want to load second (after the other frame finishes)  --&gt;

&lt;frame name="frame1" src="blank.html"&gt;
&lt;frame name="frame2" src="frame2-page.html"&gt;
&lt;/frameset&gt;
&lt;/HTML&gt;

&lt;!-- STEP FOUR: Save this short HTML page as blank.html  --&gt;

&lt;html&gt;
&lt;body bgcolor="white"&gt;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;

 

&lt;!-- Script Size:  1.02 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>